<template>
  <div class="room-list-container">
    <div class="hotel-info" v-if="hotel">
      <el-card shadow="hover">
        <div class="hotel-header">
          <h2>{{ hotel.hotelName }} 房间列表</h2>
          <div class="hotel-rating">
            <el-rate v-model="hotel.rating" disabled show-score text-color="#ff9900" />
          </div>
        </div>
        <div class="hotel-meta">
          <span><el-icon><Location /></el-icon> {{ hotel.country }} {{ hotel.city }}</span>
          <el-button type="primary" @click="goBack">返回酒店列表</el-button>
        </div>
      </el-card>
    </div>

    <div v-if="loading" class="loading-container">
      <el-skeleton :rows="5" animated />
    </div>
    
    <div v-else>
      <div v-if="roomList.length === 0" class="empty-container">
        <el-empty description="该酒店暂无可用房间" />
      </div>
      
      <el-row :gutter="20" v-else>
        <el-col :xs="24" :sm="12" :md="8" :lg="6" v-for="room in roomList" :key="room.roomType" class="room-card-col">
          <el-card class="room-card" shadow="hover">
            <div class="room-image">
              <img :src="room.image || '/src/assets/default.png'" alt="房间图片">
            </div>
            <div class="room-info">
              <h3 class="room-type">{{ room.roomType }}</h3>
              <div class="room-meta">
                <div class="room-price">¥ {{ room.price }} <span>/ 晚</span></div>
                <div class="room-available">剩余: {{ room.availableCount }} 间</div>
              </div>
              <div class="room-features">
                <el-tag size="small" v-if="room.breakfast === '1'" type="success">含早餐</el-tag>
                <el-tag size="small" v-else>不含早餐</el-tag>
              </div>
              <div class="room-actions">
                <el-button type="primary" @click="createOrder(room)" :disabled="room.availableCount <= 0">
                  预订房间
                </el-button>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getRoomsByHotel } from '@/api/room'
import { getHotelByName } from '@/api/hotel'
import { ElMessage } from 'element-plus'
import { Location } from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()
const hotelName = ref('')
const hotel = ref(null)
const roomList = ref([])
const loading = ref(true)

// 初始化数据
const initData = async () => {
  loading.value = true
  
  try {
    // 从路由参数获取酒店名称
    hotelName.value = route.params.hotelName as string
    
    if (!hotelName.value) {
      ElMessage.error('未指定酒店名称')
      router.push('/hotel')
      return
    }
    
    // 获取酒店详情
    const hotelRes = await getHotelByName(hotelName.value)
    const hotelResult = hotelRes.data
    
    if (hotelResult && hotelResult.code === 200 && hotelResult.data) {
      hotel.value = hotelResult.data
    } else {
      ElMessage.warning('获取酒店信息失败')
    }
    
    // 获取房间列表
    const res = await getRoomsByHotel(hotelName.value)
    const result = res.data
    
    if (result && result.code === 200) {
      roomList.value = Array.isArray(result.data) ? result.data : []
      console.log('房间列表数据:', roomList.value)
    } else {
      ElMessage.error(result?.msg || '获取房间列表失败')
    }
  } catch (error) {
    console.error('获取房间列表错误:', error)
    ElMessage.error('网络错误，获取房间列表失败')
  } finally {
    loading.value = false
  }
}

// 返回酒店列表
const goBack = () => {
  router.push('/hotel')
}

// 创建订单
const createOrder = (room) => {
  // 跳转到创建订单页面，并传递酒店和房间信息
  router.push({
    path: '/create-order',
    query: {
      hotelName: hotelName.value,
      roomType: room.roomType
    }
  })
}

onMounted(() => {
  initData()
})
</script>

<style scoped>
.room-list-container {
  padding: 20px;
}

.hotel-info {
  margin-bottom: 30px;
}

.hotel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.hotel-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.loading-container {
  padding: 40px;
}

.empty-container {
  padding: 40px;
  text-align: center;
}

.room-card-col {
  margin-bottom: 20px;
}

.room-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s;
}

.room-card:hover {
  transform: translateY(-5px);
}

.room-image {
  height: 180px;
  overflow: hidden;
  border-radius: 4px;
  margin-bottom: 15px;
}

.room-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.room-info {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.room-type {
  margin: 0 0 10px 0;
  font-size: 18px;
  font-weight: 600;
}

.room-meta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.room-price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.room-price span {
  font-size: 14px;
  font-weight: normal;
  color: #909399;
}

.room-available {
  font-size: 14px;
  color: #409EFF;
}

.room-features {
  margin-bottom: 15px;
}

.room-actions {
  margin-top: auto;
}

.room-actions .el-button {
  width: 100%;
}
</style> 